<template>
  <div class="search-container">
    <input v-model="searchQuery" @keyup.enter="performSearch" placeholder="输入搜索内容" class="search-input" />
    <button @click="performSearch" class="search-button">搜索</button>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'SearchComponent',
  data () {
    return {
      searchKeyword: ''
    }
  },
  computed: {
    ...mapGetters('Book', ['filteredBookList'])
  },
  methods: {
  }
}
</script>
<style scoped>
.search-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 10px;
}

.search-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 5px;
}

.search-button {
  padding: 10px 20px;
  width: 150px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.search-button:hover {
  background-color: #0056b3;
}

.search-results-container {
  margin-top: 20px;
  width: 300px;
}

.search-results-header {
  margin-bottom: 10px;
}

.search-results-list {
  list-style-type: none;
  padding: 0;
}
.search-result-item {
  padding: 5px;
  border-bottom: 1px solid #eee;
}
</style>
